<template>
  <div class="v-select-tree">
    <m-tree
      :treeData="treeData"
      :sortByName="sortByName"
    >
      <span :id="'v'+nodeData.id" slot-scope="{nodeData}" @click="handleNodeClick(nodeData)" >
        <a-checkbox
          v-if="showCheckbox && !nodeData.disabledCheck"
          v-model="nodeData.checked"
          :disabled="nodeData.disabled"
          class="g-m-r-4"
          @change="handleCheckChange(nodeData)" />
        <img
          v-if="nodeData.iconPath"
          :src="nodeData.iconPath"
          :alt="nodeData.iconPath"
          style="position: relative;top: -2px;left: 0px;width: 16px;height: 16px;"
          class=" g-pointer"
        />
        <span class="g-m-l-4 _display-title g-pointer" :class="{_selected:nodeData.selected,_disabled:nodeData.disabled}">{{nodeData.displayTitle || '---'}}</span>
      </span>
    </m-tree>
  </div>
</template>
<script>
import { treeForEach, initTree, findNodeByValue } from 'src/util/common';
import Tree from 'src/components/common/Tree/MTree';

export default {
  name: 'comp-select-tree',
  components: {
    "m-tree": Tree
  },
  props: {
    treeData: Array, //// 
    showCheckbox: Boolean,
    multiple: Boolean,
    sortByName: {
      type: Boolean,
      default: true
    }
  },
  data() {
    
    return {

    };
  },
  mounted(){

  },
  methods: {
    handleNodeClick(nodeData){
      console.log(nodeData);
      //// 这里之前版本有个多选 实际在用的时候 会导致默认选中的时候，用户点了其他节点那个主节点没有取消 ，第一次插入到多选树时会将主节点插入 相当于同时插入两个节点 这种交互不对 
      if (nodeData.disabled) return;
      this.$emit('select', nodeData);

    },
    handleCheckChange( nodeData){
      this.$emit('check', nodeData);

    },
    log(str){
      console.log(str);
    },
    getSelectedNodes(){
      const nodes = [];
      treeForEach(this.treeData, node => {
        if (node.selected === true) nodes.push(node);
      });
      return nodes;

    },
    getCheckedNodes(){
      const nodes = [];
      treeForEach(this.treeData, node => {
        if (node.checked === true) nodes.push(node);
      });
      return nodes;

    },
    selectAll(){
      treeForEach(this.treeData, node => {
        if (!node.disabledCheck){
          node.selected = true;
          node.checked = true;
          this.$emit('check', node);
        }
      });
    },
    clearAll(){
      treeForEach(this.treeData, node => {
        if (!node.disabledCheck){
          node.selected = false;
          node.checked = false;
          this.$emit('check', node);
        }
      });
    },
    //// handleSelect(keys){

    ////   const selectedItems = keys.map(key => findNodeByValue(this.treeData, key));
      
    ////   if (this.multiple){
    ////     this.$emit('select', selectedItems);

    ////   } else {
    ////     this.$emit('select', selectedItems[0]);

    ////   }

    //// },
    //// handleCheck(keys, e){
    ////   this.$emit('check', keys[0], e);
    //// }
		
  }
};
</script>
<style lang="scss">
.v-select-tree {
  ._display-title {
    &._selected {
      background-color: #3483b8;
      color: #fff ;
    }
    &._disabled {
      color: lightgray;
      &._selected {
         background-color: #fff;
      }

    }
    
  }

}

</style>